<template>
  <div class="myInput">
    <el-input
      :ref="inputRef"
      class="el-form-item-all-input"
      v-model.trim="childModel"
      :disabled="disabled"
      :autosize="configDefault.autosize"
      :clearable="configDefault.clearable"
      :placeholder="
        disabled || configDefault.readonly ? '' : configDefault.placeholderLabel
      "
      :readonly="configDefault.readonly"
      :resize="configDefault.resize"
      :rows="configDefault.rows"
      :tabindex="configDefault.tabindex"
      :maxlength="configDefault.maxlength"
      :show-word-limit="configDefault.showWordLimit"
      :type="configDefault.type"
      @input="inputValueChange(childModel)"
      @change="inputChange(childModel)"
      @focus="inputFocus(childModel)"
      @blur="inputBlur(childModel)"
      @keydown.enter.native="inputKeydown(childModel)"
    >
      <template
        v-if="configDefault.type == 'text'"
        :slot="configDefault.slotType"
      >
        {{ configDefault.slotName }}
      </template>
    </el-input>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "myInput",
  props: {
    inputRef: {
      //自定义ref
      type: String,
      default() {
        return "vueInput";
      },
    },
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组文本框
      type: [String, Number],
      default() {
        return 1;
      },
    },
    disabled: {
      // 当前组件是否禁用
      type: Boolean,
      default() {
        return false;
      },
    },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      childModel: this.model ? this.model : "",
      configDefault: {
        clearable: true, // 是否可清空
        limitMin: null, //最小限制值
        limitMax: null, //最大限制值
        toFixed: 0, // 保留小数位
        tabindex: "1", // 当前tab的值 用于tab键控制切换顺序
        rows: 2, // 输入框行数，只对 type="textarea" 有效
        autosize: { minRows: 4, maxRows: 6 }, // 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }
        resize: "none", // 控制是否能被用户缩放 none, both, horizontal, vertical
        readonly: false, // 是否只读
        slotType: "", // 当前组件slot插槽类型prefix（输入框头部内容）、suffix（输入框尾部内容）、prepend（输入框前置内容）、append（输入框后置内容）
        slotName: "",
        maxlength: null,
        showWordLimit: false,
        type: "text", // 输入框类型text，textarea 和其他 原生 input 的 type 值
        placeholderLabel: "",
      },
    };
  },
  watch: {
    childModel(val, oldVal) {
      if (val !== oldVal) {
        this.$emit("update:model", val);
      }
    },
    model(val, oldVal) {
      if (val !== this.childModel) {
        this.childModel = val;
      }
    },
    formConfigData: {
      handler(newVal, objVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    inputValueChange: function (newVal) {
      // 在 Input 值改变时触发
      this.$emit("inputCallback", this.modelKey + "_" + this.which, newVal);
    },
    inputChange: function (newVal) {
      // 仅在输入框失去焦点或用户按下回车时触发
      this.$emit("changeCallback", this.modelKey + "_" + this.which, newVal);
    },
    inputFocus: function (newVal) {
      //在 Input 获得焦点时触发
      this.$emit("focusCallback", this.modelKey + "_" + this.which, newVal);
    },
    inputBlur: function (newVal) {
      //在 Input 失去焦点时触发
      this.$emit("blurCallback", this.modelKey + "_" + this.which, newVal);
    },
    inputKeydown: function (newVal) {
      //键盘回车
      this.$emit("keydownCallback", this.modelKey + "_" + this.which, newVal);
    },
  },
};
</script>

<style lang="less"></style>
